<template>
<view>
	<!-- 导航栏 -->
	<view class="header-fit-box" :style="'padding-top: '+ StatusBar +'px;'">
		<view class="header-fit" :style="{'height':(CustomBar-StatusBar) +'px'}">
			<image @click="back" class="back" src="@/static/home/subpage/back_black.png"></image>
			<text class="text">财经日历</text>
			<view class="item" @click="sharefix">
				<text class="li">分享</text>
			</view>
		</view>
	</view>
	<view :style="{'height':CustomBar +'px'}" style="border-bottom:2rpx solid #F6F7F9;"></view>
	<view class="navbar-box">
		<view class="box">
			<view class="li active">数据</view>
			<view class="li">事件</view>
			<view class="li">假期</view>
		</view>
	</view>
	<view class="line"></view>
	<mescroll-uni :sticky="true" ref="mescrollRef" @init="mescrollInit" @down="downCallback" :up="{use:false}" :top="scrollTop">
		<view class="content">
			<view class="item" v-for="(item,index) in 3">
				<view class="left">
					<view class="lex"><view class="quan"></view></view>
				</view>
				<view class="right">
					<view class="date">2023-11-23</view>
					<view class="text">东京证券交易所:休市一日。</view>
					<view class="festival">
						<image src="@/static/logo.png"></image>
						<text>日本: 劳动感恩节</text>
					</view>
				</view>
			</view>
		</view>
	</mescroll-uni>
	<share-fix :isshare="isshare" :animationData="animationData" @closesharefix="closesharefix"></share-fix>
</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				animationData: {},
				animation:{},
				isshare: false,
				scrollTop:'0px',
			};
		},
		onLoad(options){
				var dw = uni.getSystemInfoSync().windowWidth;
				var scale = dw/750;
				if(dw>950) this.scrollTop = this.CustomBar+72+'px';
				else this.scrollTop = this.CustomBar+(144*scale)+'px';
		},
		onReady(){
				var animation = uni.createAnimation({
					duration: 500,
					timingFunction: 'ease',
				})
				this.animation =animation;
		},
		methods:{
			sharefix(){
				this.isshare= true;
				this.animation.translateY(0).step();
				this.animationData = this.animation.export();
			},
			closesharefix(){
				this.isshare= false;
				this.animation.translateY("100%").step();
				this.animationData = this.animation.export();
			},
			back(){
				uni.navigateBack();
			},
			/*下拉刷新的回调 */
			downCallback() {
				this.mescroll.resetUpScroll();
				setTimeout(()=>{
					this.mescroll.endSuccess(9,false);// 加载成功
				},1500)
			},
		}
	}
</script>

<style lang="scss">
.navbar-box{
	padding: 24rpx;
	background-color: #fff;
	z-index:3;
	position: relative;
	.box{
		display: flex;
		align-items: center;
		width: 100%;
		height: 80rpx;
		background: #F7F7F7;
		border-radius: 16rpx;
		padding:4rpx;
		box-sizing: border-box;
	}
	.li{
		font-size: 28rpx;
		color: rgba(0,0,0,0.6);
		flex:1;
		text-align: center;
		height:100%;
		line-height: 72rpx;
	}
	.li.active{
		background-color: #fff;
		font-weight: bold;
		color: rgba(0,0,0,0.8);
		border-radius: 16rpx;
	}
}
.line{
	background: #F4F5F7;
	height:16rpx;
}
.content{
	background-color: #fff;
	padding:32rpx 32rpx 32rpx 28rpx;
	.item{
		display: flex;
		.left{
			position: relative;
			.lex{
				height:40rpx;
				display: flex;
				align-items: center;
			}
			.quan{
				width: 14px;
				height: 14px;
				border: 2px solid #EE5953;
				box-sizing: border-box;
				border-radius: 50%;
				margin-right:32rpx;
				position: relative;
				z-index: 2;
				background-color: #fff;
			}
		}
		.left::after{
			content: '';
			width: 2px;
			height: 100%;
			background: #F6F7F9;
			position: absolute;
			left:6px;top:10rpx;
		}
		.right{
			padding-bottom:32rpx;
			flex:1;
			.date{
				font-size: 28rpx;
				font-weight: bold;
				color: #EE5953;
				line-height: 40rpx;
			}
			.text{
				margin-top:16rpx;
				font-size: 32rpx;
				font-weight: bold;
				color: rgba(0,0,0,0.8);
			}
			.festival{
				margin-top:32rpx;
				display: flex;
				align-items: center;
				& image{
					width: 52rpx;
					height: 32rpx;
					margin-right:8rpx;
				}
				& text{
					font-size: 24rpx;
					color: rgba(0,0,0,0.6);
				}
			}
		}
	}
	.item:last-child{
		.left::after{
			display: none;
		}
	}
}
</style>
